邊學AngularJS邊做Todo List (1) － Hello World

js忍之道 js原創 angularjs

lalabear 2012-07-12 23:22:54 ‧ 45024 瀏覽

分享至

HTML是打造Web的根本，但是它最早的設計概念是文件式的，它被當成是一頁頁的文件/資源來看待。

這樣的概念簡單、明白，容易撰寫、也讓Web成為一種非常普及的形式，但是這種文件式的概念，對於發展Web 應用程式來說，卻顯得有些不足了。

在此我們不深論其中的問題，但AngularJS的誕生，就是Google對這個問題的解答之一。

AngularJS是用來開發Web應用程式的框架，它能讓HTML搖身一變成為描述你的應用程式的模板語言，並且可以和資料來源綁定，讓Web應用程式開發更容易。

接下來，我們會利用AngularJS來造一個Todo List ，在這個過程中，邊做邊學AngularJS，從中認識到AngularJS的特色。

不過在那之前，不免俗的先來一個Hello World的程式。
先看程式碼－－

<html ng-app>
  
    <title>邊學AngularJS邊做Todo List (1)</title>
    <script type="text/javascript" src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  
  
    <h1>Hello World</h1>
	<p>AngularJs say hello to {{yourName || 'everyone'}}!</p>
      <label>輸入你的姓名，Angular會跟你打招呼</label>
      <input type="text" ng-model="yourName">

完成後長這樣：

1.我們在 html的地方加上一個「ng-app」識別，這是AngularJS用來啟動的關鍵字眼，在DOM載入後，AngularJS就會開始尋找這個字，找到的話，就會把這頁面當成是AngularJS應用程式。當然如果只是局部需要用到，而非整站，你也可以把這個字放在某個應用到AngularJS的div中。

2.在header載入了我們的主角 angular-1.0.1.min.js

3.在第9行，我們看到**{{ }}** 這個模版引擎常出現的2個成對大括號，沒錯，這裡就是用來放置變數的，我們這裡放了一個yourName的變數，後面放一個變數是空的時候，用’everyone’來和大家打招呼。

4.關鍵來了，在input的地方，我們放了一個 ng-model，這個我們後面會再詳述，現在就把它當成是資料來源，名稱取成是 yourName，而剛剛上面大括號中的 yourName，就會和這裡輸入的資料綁定。

就這樣，沒有任何一行程式，我們只是在HTML上加上幾個 tag，就完成了這個簡單的互動程式。

大家可以試著輸入自己的名字，再刪掉看看，更能體會AngularJS在資料綁定上的威力。

Live Demo ::完整的程式碼

邊學AngularJS邊做Todo List (1) － Hello World
邊學AngularJS邊做Todo List (2) － Todo List 動起來
 邊學AngularJS邊做Todo List (3) － Todo List 刪項目
 邊學AngularJS邊做Todo List (4) －修改待辦事項
 邊學AngularJS邊做Todo List (5) －為測試作準備
 邊學AngularJS邊做Todo List (6) － E2E測試(上)